<page-bar></page-bar>
<form nz-form [formGroup]="msgForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="meta">元数据</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择消息类型" [nzExtra]="metaContent">
      <nz-select nzPlaceHolder="选择一个消息" nzShowSearch nzServerSearch formControlName="meta"
        (nzOnSearch)="onSearch($event)" [compareWith]="compareFn" (ngModelChange)="selectMeta($event)">
        <!-- options -->
        <ng-container *ngFor="let o of optionList">
          <nz-option *ngIf="!isLoading" nzCustomContent [nzValue]="o.value" [nzLabel]="o.label">
            <i *ngIf="o.type === 'USER'" nz-icon nzType="user" nzTheme="outline" style="color: #1890ff"></i>
            <i *ngIf="o.type === 'SYS'" nz-icon nzType="setting" nzTheme="outline" style="color: #f5222d"></i>
            &nbsp;<div style="display: inline-block; color: black"> {{o.label}}
              <code [ngStyle]="{'color': o.type === 'USER' ? '#1890ff' : '#f5222d'}">{{o.code}}</code>
            </div>
            <div style="color: #afafaf; font-size: 12px;">{{o.remark}}</div>
          </nz-option>
        </ng-container>
        <!-- 加载组件 -->
        <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
          <i nz-icon nzType="loading" class="loading-icon"></i> 加载数据...
        </nz-option>
      </nz-select>
      <ng-template #metaContent>
        <span *ngIf="msgForm.controls['meta'].value && msgForm.controls['meta'].value.msgType==='SYS' ">
          查看消息元数据配置的<a (click)="openModal()" href="javascript:void(0)"
            class="brand-color">收信方</a>，未选择下面收信方则将以此配置进行发送</span>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item nz-row>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="meta">收信方</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzExtra="仅支持发给账号，系统类消息设置的收信方将被覆盖">
      <nz-select nzMode="multiple" nzShowSearch nzServerSearch formControlName="recer"
        (nzOnSearch)="onSearchRecer($event)">
        <!-- options -->
        <ng-container *ngFor="let o of optionList2">
          <nz-option *ngIf="!isLoading2" nzCustomContent [nzValue]="o.value" [nzLabel]="o.label">
            {{o.label}}
          </nz-option>
        </ng-container>
        <!-- 加载组件 -->
        <nz-option *ngIf="isLoading2" nzDisabled nzCustomContent>
          <i nz-icon nzType="loading" class="loading-icon"></i> 加载数据...
        </nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item nz-row>
    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="title">标题</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <input maxlength="100" nz-input formControlName="title" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item nz-row>
    <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="title">内容</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <textarea maxlength="255" rows="4" nz-input formControlName="content"></textarea>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item nz-row class="register-area">
    <nz-form-control [nzSpan]="14" [nzOffset]="6">
      <button nz-button nzType="primary">发送</button>
      <button type="button" nz-button nzType="default" (click)="reset()">重置</button>
    </nz-form-control>
  </nz-form-item>
</form>
